<template>
  <div class="CADTopMenu">
    <el-menu class="el-menu-demo" :default-active="activeIndex" @select="onSelItem" background-color="#545664"
      mode="horizontal" text-color="#fff">
      <el-sub-menu index="file">
        <template #title>文件</template>
        <el-menu-item index="file_newFile">新建文件</el-menu-item>
        <el-menu-item index="file_open">打开</el-menu-item>
        <el-menu-item index="file_save">保存</el-menu-item>
        <el-menu-item index="file_saveas">另存为本地</el-menu-item>
        <el-menu-item index="file_export">导出为</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="edit">
        <template #title>编辑</template>
        <el-menu-item index="edit_undo">撤销</el-menu-item>
        <el-menu-item index="edit_redo">重做</el-menu-item>
        <el-menu-item index="edit_copy">复制</el-menu-item>
        <el-menu-item index="edit_paste">粘贴</el-menu-item>
        <el-menu-item index="edit_cut">剪切</el-menu-item>
        <el-menu-item index="edit_delete">删除</el-menu-item>
        <el-menu-item index="edit_clear">清屏</el-menu-item>
        <el-sub-menu index="edit_draw">
          <template #title>绘图</template>
          <el-menu-item index="edit_draw_line">连接线</el-menu-item>
          <el-menu-item index="edit_draw_text">文本</el-menu-item>
          <el-menu-item index="edit_draw_bmp">位图</el-menu-item>
        </el-sub-menu>
      </el-sub-menu>
      <el-sub-menu index="view">
        <template #title>视图</template>
        <el-menu-item index="view_addpage">新建画布</el-menu-item>
        <el-menu-item index="view_showToolBox">工具箱</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="align">
        <template #title>对齐</template>
        <el-menu-item index="align_top">上对齐</el-menu-item>
        <el-menu-item index="align_bottom">下对齐</el-menu-item>
        <el-menu-item index="align_left">左对齐</el-menu-item>
        <el-menu-item index="align_right">右对齐</el-menu-item>
        <el-menu-item index="align_horn">水平中线对齐</el-menu-item>
        <el-menu-item index="align_vertical">垂直中线对齐</el-menu-item>
        <el-menu-item index="align_horn_even">水平等间距</el-menu-item>
        <el-menu-item index="align_vertical_even">垂直等间距</el-menu-item>
        <el-menu-item index="align_samesize">等大小</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="layer">
        <template #title>图层</template>
        <el-menu-item index="lay_manage">管理器</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="animate">
        <template #title>动画</template>
        <el-menu-item index="animate_start">开始</el-menu-item>
        <el-menu-item index="animate_stop">停止</el-menu-item>
        <el-menu-item index="animate_translate" :disabled=true>平移运动</el-menu-item>
        <el-menu-item index="animate_rotate">旋转运动</el-menu-item>
        <el-menu-item index="animate_inflate">膨胀运动</el-menu-item>
        <el-menu-item index="animate_piston">活塞运动</el-menu-item>
        <el-menu-item index="animate_particle" :disabled=true>粒子效果</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="sysTool">
        <template #title>工具</template>
        <el-menu-item index="sysTool_option">选项</el-menu-item>
        <el-menu-item index="sysTool_script" :disabled=true>脚本</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="export">
        <template #title>导出</template>
        <el-menu-item index="export_png">png</el-menu-item>
        <el-menu-item index="export_4kpng">高清png</el-menu-item>
        <el-menu-item index="export_svg" :disabled=true>svg</el-menu-item>
        <el-menu-item index="export_dxf" :disabled=true>dxf</el-menu-item>
        <el-menu-item index="export_cimge" :disabled=true>cimg/cime</el-menu-item>
        <el-menu-item index="export_pdf" :disabled=true>pdf</el-menu-item>
      </el-sub-menu>
    </el-menu>


  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus';
import { useStore } from 'vuex';
const store = useStore();
const activeIndex = ref('1')
const refFilePanel = ref(null)
const login_flag = ref(false)
const userIconSrc = ref("https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png")
const loginName = ref("游客")
const fullScreenBtnLabel = ref('全屏')


const onSelItem = (key, keyPath) => {
  console.log("topmenu onSelItem----------------");
  if (key == "user_logout") {
    store.commit("logout");
    login_flag.value = false;
    loginName.value = "游客";
  }
  else if (key == "sys_share") {
    shareGraph();
  }
  else if (key == "sys_myfile") {
      openMyFilePanel();
    }
  else if (key == "view_showToolBox") {
    let showFunc = window.gstore.state.onShowToolBox;
    if (showFunc) {
      showFunc(true);
    }
  }
  else if (key == "sys_fullscreen") {
    fullScreen();
  }
  else {
    window.canvasManager.sendCMD(key, window.mainctl);
  }
}

const openMyFilePanel = () =>{
    refFilePanel.value.drawerVisible = true;
  }

const fullScreen = () => {
  if (document.fullscreenElement) {
    fullScreenBtnLabel.value = "全屏";
        document.exitFullscreen();
      } else {
        fullScreenBtnLabel.value = "退出全屏";
        document.documentElement.requestFullscreen();
      }
}

const shareGraph = () => {
  let curentGID = window.gstore.state.curentFile["uuid"];
  if (!curentGID || (curentGID && curentGID.length == 0)) {
    return;
  }

  let curentUserID = window.gstore.state.uid;
  let fileUerID = window.gstore.state.curentFile['userid'];
  if (curentUserID != fileUerID) {
    ElMessage("非本人文件，无二次分享权限！");
    return;
  }

  let t = window.refShareFileDlg.value;
  if (t && !t.visible) {
    t.visible = true;
  }
}

onMounted(() => {
  console.log("VisoTopMenu onMounted");
  let curentUserID = store.state.uid;
  if (curentUserID && curentUserID.length > 0) {
    login_flag.value = true;
    loginName.value = store.state.name;
  }
  else {
    login_flag.value = false;
    loginName.value = "游客";
  }
})

var updateToolState = function (flag, name) {
  login_flag.value = flag;
  loginName.value = name;
}

defineExpose({
  login_flag,
  loginName
});

</script>

<style scoped>
.el-menu-demo {
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  height: 44px;
}

.TopMenu {
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
}

.login-btn {
  margin-top: 15px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
}
</style>